<template>
  <div>
    <Header></Header>
    <content>

    </content>
    <div style=" height: 100px;"></div>
    <Footer></Footer>
    <lay-backtop :showHeight="0"></lay-backtop>
  </div>
</template>
<script lang="ts">
import { ref } from "vue";
import Header from "./header.vue";
import Footer from "./footer.vue";
import content from "./content.vue";
export default {
  name: "menulayou",
  components: {
    Header, Footer,content
  },
  setup() {

    const visible = ref(false);
    const mmvisible = ref(false);


    const collapseState = ref(false);
    const sideWidth = ref("230px");
    const showtime = ref("");
    const datatime = ref("");
    const layFormRef1 = ref(null);

    const changeVisible = function () {
      visible.value = !visible.value;
    };

    // 侧边状态
    const collapse = function () {
      collapseState.value = !collapseState.value;
      sideWidth.value = collapseState.value ? "60px" : "230px";
    };

    // 路由刷新



    const dateRender =  ()=> {
      try {
        setInterval( ()=> {
          var da = new Date();
          datatime.value =
            da.getFullYear() + "-" + (da.getMonth() + 1) + "-" + da.getDate();
          showtime.value =
            da.getHours() +
            ":" +
            da.getMinutes() +
            ":" +
            da.getSeconds() +
            " 星期" +
            "日一二三四五六".charAt(da.getDay());
        }, 100);
      } catch (e) {
        console.log(e);
      }
    };
    dateRender();
    // return instance
    return {
      sideWidth,
      changeVisible,
      collapseState,
      collapse,

      visible,
      showtime,
      datatime,
      dateRender,

      mmvisible,

      layFormRef1,

    };
  },
};
</script>

<style></style>
